<template>
    <div class="dialog_modal" :style="dialogShow ? 'display:block;' : ''">
        <div>
            <img src="../../assets/img/tsk.png" alt="" class="dialog_imgG">
            <div class="ctx">
                <span class="ctx_top">VIP尊享权益，开通会员后</span>
                <span class="ctx_bottom">
                    精准数据搜索<span class="ctx_bottom_right">任你筛选</span>
                </span>
            </div>
            <div class="dialog_cancel">
                <el-button bg text style="width: 100%;height: 100%;color: #c1c4cb;font-weight: 600;"
                    @click="cancelVip">考虑一下</el-button>
            </div>
            <div class="dialog_agree">
                <el-button color="#fce2e1" style="width: 100%;height: 100%;color: #f43107;font-weight: 600;"
                    @click="agreeVip">开通VIP</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/pain/login/login";
const store = useCounterStore()
const { dialogShow } = storeToRefs(store);
const token = localStorage.getItem("token");
import { useRouter } from "vue-router";
const router = useRouter();

const cancelVip = () => {
    store.dialogShow = false;
}
const agreeVip = () => {
    store.dialogShow = false;
    if (!token) {
        store.uselogin = true;
    } else {
        const href = router.resolve({
            path: "/memberPayment",
        });
        window.open(href.href, "_blank");
    }
}
</script>

<style lang="scss" scoped>
.dialog_modal {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;

    .dialog_imgG {
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -75%);
        z-index: 10000;
    }

    .ctx {
        z-index: 10001;
        position: absolute;
        width: 200px;
        height: 50px;
        // background-color: red;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -200%);

        span {
            text-align: center;
            font-weight: 600;
            // font-size: 18px;
        }

        .ctx_top {
            display: block;
        }

        .ctx_bottom {
            margin-top: 10px;
            display: block;
            color: #f43107;

            .ctx_bottom_right {
                color: #000;
            }
        }
    }

    .dialog_cancel {
        z-index: 10001;
        position: absolute;
        width: 122px;
        height: 42px;
        // background-color: red;
        left: 50%;
        top: 50%;
        transform: translate(-110%, 30%);
        cursor: pointer;
    }

    .dialog_agree {
        z-index: 10001;
        position: absolute;
        width: 122px;
        height: 42px;
        // background-color: blue;
        left: 50%;
        top: 50%;
        transform: translate(10%, 30%);
        cursor: pointer;
    }
}
</style>